<template>
  <view class="lottery-history-container">
    <!-- 遮罩层 -->
    <view class="popup" @click="onClickOperate($event, 'close', {})"> </view>

    <view class="box-module">
      <!-- 头部 -->
      <view class="top">
        <view class="title">开奖记录 </view>
        <img
          class="close-icon"
          src="../img/back-1.png"
          alt=""
          @click="onClickOperate($event, 'close', {})"
        />
      </view>
      <!-- 箱子列表 -->
      <scroll-view
        class="content"
        scroll-y
        :scroll-with-animation="true"
        :scroll-left="scrollLeft"
        @scroll="onScroll"
        @scrolltolower="onreachBottom"
        v-if="list.length > 0"
      >
        <lottery-history-item
          v-for="(item, index) in list"
          :key="index"
          :details="item"
        ></lottery-history-item>
      </scroll-view>
      <u-empty
        v-if="!loading && list.length == 0"
        text="暂无开奖记录哦~"
        mode="list"
        icon-size="120"
        height="70%"
        font-size="14rpx"
        :src="
          $IMG_URL + '/uploads/20230527/55453739a329de5eb480838ef5ad58c5.png'
        "
      ></u-empty>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
import LotteryHistoryItem from './live-lottery-history-item.vue';
const _delay = tools.delayDither(50);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { LotteryHistoryItem },
  props: {
    initiallyId: {
      type: [String, Number],
      default: '',
    },
    boxId: {
      type: [String, Number],
      default: '',
    },
  },
  data: () => ({
    // 当前 滚动条 位置
    scrollLeft: 0,
    // 页码
    page: 1,
    // 行数
    rows: 10,
    //记录列表
    list: [],
    // 加载中
    loading: false,
    //完成 到底
    finished: false,
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.getData({});
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // 关闭弹窗
          case 'close':
            this.close(data);
            break;
        }
      });
    },

    // 获取开奖记录
    getData(ev = {}) {
      let { status = 'init' } = ev;

      if (status === 'init') {
        this.page = 1;
        this.rows = 10;
      }
      this.loading = true;
      this.$http(
        'v1.yfsHistory',
        {
          id: this.initiallyId,
          box_id: this.boxId,
          page: this.page,
          rows: this.rows,
        },
        '加载中'
      ).then((res) => {
        if (res.code === 1) {
          switch (status) {
            case 'init':
              this.list = res.data.list;
              break;
            case 'pull':
              this.list.push(...res.data.list);
              break;
          }
          if (res.data.list.length < this.rows) {
            this.finished = true;
          }
        }
        this.loading = false;
      });
    },

    // 关闭 弹窗
    close() {
      this.$emit('changeHistoryMod', false);
    },
    // 监听滚动条
    onScroll() {},
    // 滚动到底
    onreachBottom() {
      if (this.finished) return;
      this.page = Number(this.page) + 1;
      this.getData({
        status: 'pull',
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.lottery-history-container {
  --h: 100vh;
  --w: 100vw;
  --vw: 350rpx;
  --vh: 96vh;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100074;
  width: var(--w);
  height: var(--h);
}
.popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.box-module {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: var(--vw);
  height: var(--vh);
  background-color: #fff;
  border-radius: 0 5rpx 5rpx 0;
  animation: slide-in-left-q 1s linear 0s 1 normal none;

  .top {
    position: relative;
    display: flex;
    padding: 19rpx 15rpx 15rpx;
    width: 100%;
    .title {
      display: flex;
      align-items: center;
      font-size: 15rpx;
      font-weight: 800;
      color: #000000;
    }
    .close-icon {
      position: absolute;
      top: 24rpx;
      right: 15rpx;
      width: 16rpx;
      height: 9rpx;

      &::after {
        content: '';
        position: absolute;
        top: -10rpx;
        left: -10rpx;
        width: 30rpx;
        height: 30rpx;
      }
    }
  }

  .content {
    position: relative;
    padding: 0 15rpx 15rpx;
    padding-left: 11rpx;
    width: 100%;
    height: calc(var(--vh) - 56rpx);

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 4;
      width: 100%;
      height: 40rpx;
      box-shadow: 0 -14rpx 15rpx #fff inset;
    }
  }
}
</style>
